/*
*   @Author: 1296
*   @Date: 2025-03-16
*   @Description: 401报错
*/

<template>
  <div class="unauthorized-container">
    <div class="unauthorized-content">
      <div class="status-card">
        <h1 class="status-code">401</h1>
        <p class="status-text">Unauthorized</p>
      </div>
      <h2 class="unauthorized-title">{{ $t('unauthorized-title') }}</h2>
      <p class="unauthorized-message">
        {{ $t('unauthorized-message-1') }}
        <br>{{ $t('unauthorized-message-2') }}
      </p>
      <div class="action-buttons">
        <div @click="handleLoginClick" class="login-button">{{ $t('Login') }}</div>
        <router-link class="home-button" to="/">{{ $t('back-to-home') }}</router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'UnAuthorized',
  methods: {
    handleLoginClick() {
      sessionStorage.removeItem('id');
      sessionStorage.removeItem('userToken');
      sessionStorage.removeItem('username');
      sessionStorage.removeItem('avatar');
      sessionStorage.removeItem('phone');
      sessionStorage.removeItem('gender');
      sessionStorage.removeItem('email');
      sessionStorage.removeItem('institute');
      sessionStorage.removeItem('major');
      sessionStorage.removeItem('className');
      sessionStorage.removeItem('role');
      sessionStorage.removeItem('locale');
      sessionStorage.removeItem('jobCode');
      this.$store.commit('CLEAR_USER');
      this.$i18n.locale = 'zh-CN';
      this.$router.push('/loginAndRegister');
    }
  }
};
</script>

<style scoped>
.unauthorized-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f8f9fa;
  animation: slideIn 0.6s ease-out;
}

.status-card {
  width: calc(600 / 1920 * 100vw);
  height: calc(400 / 1080 * 100vh);
  background: linear-gradient(135deg, #fff5f5 0%, #ffe3e3 100%);
  border-radius: calc(16 / 1920 * 100vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 calc(8 / 1920 * 100vw) calc(20 / 1920 * 100vw) rgba(255, 76, 76, 0.15);
  margin-bottom: calc(32 / 1080 * 100vh);
}

.status-code {
  font-size: clamp(5rem, calc(80/1920 * 100vw), 10rem);
  color: #ff4c4c;
  margin: 0;
  text-shadow: calc(2 / 1920 * 100vw) calc(2 / 1920 * 100vw) calc(4 / 1920 * 100vw) rgba(0,0,0,0.1);
}

.status-text {
  font-size: clamp(2rem, calc(24/1920 * 100vw), 4rem);
  color: #ff6b6b;
  margin-top: calc(16 / 1080 * 100vh);
}

.unauthorized-content {
  text-align: center;
  max-width: calc(800 / 1920 * 100vw);
  padding: calc(32 / 1920 * 100vw);
}

.unauthorized-title {
  font-size: calc(40 / 1920 * 100vw);
  color: #343a40;
  margin: calc(24 / 1080 * 100vh) 0;
}

.unauthorized-message {
  font-size: calc(20 / 1920 * 100vw);
  color: #6c757d;
  line-height: 1.6;
  margin-bottom: calc(32 / 1080 * 100vh);
}

.action-buttons {
  display: flex;
  gap: calc(24 / 1920 * 100vw);
  justify-content: center;
}

.login-button, .home-button {
  padding: calc(12 / 1920 * 100vw) calc(32 / 1920 * 100vw);
  font-size: calc(18 / 1920 * 100vw);
  border-radius: calc(8 / 1920 * 100vw);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.login-button {
  background-color: #ff4c4c;
  color: white;
  border: calc(2 / 1920 * 100vw) solid #ff4c4c;
}

.home-button {
  background-color: #f8f9fa;
  color: #495057;
  border: calc(2 / 1920 * 100vw) solid #dee2e6;
}

@media (max-width: 768px) {
  .status-card {
    width: calc(600 / 768 * 100vw);
    height: calc(400 / 768 * 100vw);
    margin-bottom: calc(32 / 768 * 100vw);
  }

  .status-code {
    font-size: calc(60 / 768 * 100vw);
  }

  .status-text {
    font-size: calc(20 / 768 * 100vw);
  }

  .unauthorized-title {
    font-size: calc(32 / 768 * 100vw);
  }

  .unauthorized-message {
    font-size: calc(16 / 768 * 100vw);
  }

  .action-buttons {
    gap: calc(16 / 768 * 100vw);
  }
}

@media (max-width: 480px) {
  .status-card {
    width: calc(320 / 480 * 100vw);
    height: calc(240 / 480 * 100vw);
  }

  .status-code {
    font-size: calc(48 / 480 * 100vw);
  }

  .status-text {
    font-size: calc(18 / 480 * 100vw);
  }

  .action-buttons {
    flex-direction: column;
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(calc(-20 / 1080 * 100vh));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>